昨天提到 React 與各種渲染術語，今天在進入正題前，先簡單說明一下什麼是 React 的「元件」。

在 React 中，「元件」就像是一個你自己定義的小模組，可以包含畫面顯示的內容和背後的邏輯（例如點擊事件、資料處理）。這樣的模組化設計可以讓你把畫面拆分成小單元，方便重複使用和管理。

什麼情況下元件會重新渲染呢？

元件會在它所依賴的資料發生改變時重新渲染，而這個資料其實就是元件的「state（狀態）」，state 會作為單向資料流的起點。當 state 更新時，React 就會根據新的內容，重新渲染對應的元件畫面。

接下來，我們來聊聊如何使用 useState 這個 React Hook 來管理元件的 state，並介紹兩個小技巧。

一、使用更新函式

setState 有兩種更新方式：直接給定新值或傳入更新函式。

• 直接給定新值：

  setCount(5); // 將 count 設定為 5
  

• 傳入更新函式：

  當更新狀態時需要使用舊的狀態值時，可以使用更新函式來確保拿到的是最新的狀態：

  setCount((prevCount) => prevCount + 1);
  

二、setState 可以用 props 來傳

在 React 中如果讓子元件接收父元件的資料的話，可以使用 props，但子元件如何修改父元件的資料呢？合法手段是：將 setState 作為 props 傳遞給子元件，這樣就可以在子元件中觸發父元件的狀態更新。

const ParentComponent = () => {
  const [isOpen, setIsOpen] = useState(false);

  return <ChildComponent toggleOpen={setIsOpen} />; // 將 setState 作為 props 傳遞
};

const ChildComponent = ({ toggleOpen }) => {
  return (
    <button onClick={() => toggleOpen((prev) => !prev)}> {/* 使用更新函式 */}
      Toggle Open
    </button>
  );
};

這樣，子元件中的按鈕就可以控制父元件中的 isOpen 狀態了。

補充：useState 常見命名風格

1. 布林值（Boolean）

• isXxx：通常用於表示某個狀態是否為 true 或 false，如開啟/關閉、啟用/停用等。

  • 例如：isOpen、isLoading、isVisible、isAuthenticated

  const [isOpen, setIsOpen] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  

• hasXxx：用於檢查是否有某個條件成立。

  • 例如：hasError、hasPermission、hasSubmitted

  const [hasError, setHasError] = useState(false);
  

2. 資料

• xxxList：用於儲存一組資料，例如待辦事項列表、使用者列表等。

  • 例如：userList、todoList、itemList

  const [userList, setUserList] = useState([]);
  

• xxxData 或 xxxInfo：用於表示某個資料物件，通常用於儲存單筆資料的詳細資訊。

  • 例如：userData、formData、productInfo

  const [userData, setUserData] = useState({ name: '', age: 0 });